<template>
	<view>
		<u-navbar
			title="注册"
			leftText="返回"
			bgColor="#ffffff"
			@leftClick="rightClick"
			:autoBack="false"
		>
		</u-navbar>
		
		<view class="content">
			<view class="title">Welcome Logon!</view>
			
			<view class="loginForm" style="padding-top: 40px;">
				<u-form
					labelPosition="left"
					:model="logonInfo"
					:rules="rules"
					ref="uForm"
				>
					<u-form-item
							prop="userAccount"
							:borderBottom="false"
							ref="item1"
					>
						<u-input
								v-model="logonInfo.userAccount"
								placeholder="请输入账号名称"
						></u-input>
					</u-form-item>
					<u-form-item
							prop="userPassword"
							:borderBottom="false"
							ref="item2"
					>
						<u-input
							placeholder="请输入密码"
							type="password"
							v-model="logonInfo.userPassword"
						  ></u-input>
					</u-form-item>
					
					<u-form-item
							prop="checkPassword"
							:borderBottom="false"
							ref="item3"
					>
						<u-input
							placeholder="请再次输入密码"
							type="password"
							v-model="logonInfo.checkPassword"
						  ></u-input>
					</u-form-item>
					
					<!-- <u-form-item
							prop="phone"
							:borderBottom="false"
							ref="item3"
					>
						<u-input
							placeholder="请输入手机号"
							v-model="userInfo.phone"
						  ></u-input>
					</u-form-item>
					
					<u-form-item
							prop="code"
							:borderBottom="false"
							ref="item4"
					> -->
						  <!-- <u-code-input v-model="userInfo.code" :fontSize="50" :size="86"></u-code-input>
					</u-form-item> -->
				</u-form>
				
				<view class="treaty" style="margin-top: 8px;">
				    <u-checkbox-group placement="row" @change="boxcheck" v-model="treaty">
				       <u-checkbox activeColor="blue" 
				            shape="circle" style="height: 20px;">
				       </u-checkbox>同意<view style="color: blue;" @click="show = true">《志愿者平台隐私协议》</view>
				    </u-checkbox-group>
				</view>
				
				<view style="margin-top: 40px;">
					<u-button text="注册" type="primary" @click="logon"></u-button>
				</view>
			</view>	
			<!-- <view>
				<image :src="'http://localhost:8080/api/user/code?phone=' + userInfo.phone"></image>

			</view> -->
			
			<u-popup :show="show" @close="close" @open="open" :closeable="true">
				<view style="padding: 10px;height: 500px;">
					<h3 style="text-align: center;margin-top: 15px;">志愿者平台隐私协议</h3>
					<text style="margin-top: 20px;font-size: 17px;display: block;text-indent: 65rpx;">请遵守志愿者平台隐私协议，禁止违法行为，好好学习，天天向上，</text>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { codeApi, logonApi } from '../../utils/user'
	export default {
		data() {
			return {
				logonInfo: {
					userAccount: '',
					userPassword: '',
					checkPassword: '',
				},
				show: false,
				treaty:[],
				rules: {
					'userAccount': {
						type: 'string',
						required: true,
						message: '请输入账号名称',
						trigger: ['blur', 'change']
					},
					'userPassword': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'checkPassword': {
						type: 'string',
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		methods: {
			rightClick(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			logon(){
				if (this.treaty.length == 0) {
					uni.$u.toast('请勾选《志愿者平台协议》！')
				} else {
					let data = {
						userAccount: this.logonInfo.userAccount,
						userPassword: this.logonInfo.userPassword,
						checkPassword: this.logonInfo.checkPassword,
					}
					if(data.userPassword != data.checkPassword){
						uni.showToast({
							icon:'error',
							title:'密码不一致'
						})
					}else{
						logonApi(data).then(res =>{
							if(res.code == 0){
								uni.showToast({
									title:'注册成功',
									duration:2000,
									icon:'success'
								})
								uni.$u.sleep(1000).then(() => {
									uni.reLaunch({
										url:'/pages/index/index'
									})
								})
								
							}
						})
					}
				}
			},
			boxcheck(){
				
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			}
		},
	}
</script>

<style scoped>
.content {
	padding: 15px 40px;
}
.title{
	font-weight: 700;
	font-size: 50rpx;
	margin-top: 100px;
	text-align: center;
}
.pointName{
	font-size: 17px;
}
</style>
